<template>
	<view class="content" @tap.stop="$refs.uniselect.close()">
        <u-navbar :fixed="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="督办" rightIcon="search" @rightClick="rightClick">
        </u-navbar>
        <view class="uniselect">
            <uni-select ref="uniselect" bgColor="#fff" :selectData="selectData" @select="select"></uni-select>
        </view>
        <view style="height:74rpx"></view>


        <!-- 内容 -->
        <view class="uni-area">
            <!-- 预警督办 -->
            <view class="u-m-t-40 uni-shadow u-p-l-10 u-p-t-10">
                <qiun-title-bar title="预警督办"/>
                <u-row class="u-flex u-flex-wrap">
                    <u-col span="3" v-for="(item,index) in duBans" :key="index" class="u-m-t-24">
                        <text class="u-text-center u-font-24 uni-dec-color">{{item.title}}</text>
                        <view class="u-m-t-14 u-text-center u-col-bottom">
                            <text class="u-font-42 font-bold">{{item.value}}</text>
                            <text class="u-font-24">个</text>
                        </view>
                    </u-col>
                </u-row>
            </view>

            <!-- 督办列表 -->
            <view class="u-m-t-40">
                <view class="u-flex u-row-between">
                    <text class="u-font-30 font-bold">督办列表</text>
                    <view class="u-flex colony" @tap="warn.show = true">
                        <text class="u-m-r-16 u-font-26">{{warn.label}}</text>
                        <u-icon name="arrow-down" size="13" color="#5D6672"></u-icon>
                    </view>
                </view>
                <uni-item-supervise class="u-m-t-30" v-for="(tem,ind) in page.list" :key="ind" :listItem="tem" />
            </view>

            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop"  @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>

        <!-- 预警筛选 -->
        <u-picker :show="warn.show" :columns="warn.data" keyName="label" :closeOnClickOverlay="true"
            @cancel="warn.show=false" @close="warn.show=false" @confirm="selectWarn">
        </u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                prameter:{
                    deptId: uni.getStorageSync("userInfo").deptId,  // 部门编号【必传】
                    gcbh: uni.getStorageSync("userInfo").ssgcbh,  // 所属工程编号【必传】
                    districtId: '', // 区划值【非必传】
                    xmtype:'', // 项目类型【非必传】 
                },
                // 下拉选择数据
				selectData:[], // 属地 项目类型
                // 督办
                duBans:[
                    { filed:'zjxm', title:'在建项目', value: 0 },
                    { filed:'jrdb', title:'今日预警', value: 0 },
                    { filed:'bydb', title:'本月督办', value: 0 },
                    { filed:'lsdb', title:'今日督办', value: 0 },
                    { filed:'ydbxms_by', title:'已督办项目数', value: 0 },
                    { filed:'wdbxms_by', title:'未督办项目数', value: 0 },
                    { filed:'ydbxms_ls', title:'已督办项目数', value: 0 },
                    { filed:'wdbxms_ls', title:'未督办项目数', value: 0 },
                ],
                // 本月督办&&历史督办筛选
                warn:{
                    show: false,
                    label: '本月预警',
                    value: 1,
                    data: [
                        [
                            { label: '本月预警', value: 1},
                            { label: '历史预警', value: 2},
                        ]
                    ]
                },
                // 分页相关参数
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                },
                page:{
                    scrollTop: 0,
                    status: 'nomore',
                    total: 0,
                    list: [], // 列表
                },
			}
		},


		onLoad() {
            // 属地
            this.$tools.getNationFn(this,res=>{
                this.selectData.splice(0,1,res)
                this.prameter.districtId = res.value
                // 项目类型
                this.$tools.getProTypeFn(this,res=>{
                    this.selectData.splice(1,1,res)
                    this.prameter.xmtype = res.value
                    // 预警督办
                    this.getDubanSupervise()
                    // 督办列表
                    this.getDubanList()
                })
            })
		},

        // 页面滚动
        onPageScroll(e){
            this.page.scrollTop = e.scrollTop
        },
        // 页面滚动到底部触发
        onReachBottom(){
            if( this.page.list.length < this.page.total ){
                this.paging.pageNum += 1
                this.page.status = 'loading'
                this.getDubanList()
            }else{
                this.page.status = 'nomore'
            }
        },


		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 搜索
            rightClick(){
                uni.navigateTo({ url: '/pages/common/search?type=duban' })
            },


            // 下拉选择
            select(e){
                this.prameter[e.type] = e.value
                // 预警督办
                this.getDubanSupervise()
                // 督办列表
                this.paging.pageNum = 1
                this.page.list = []
                this.getDubanList()
                this.toTop()
            },
            // 选择属地
            selectWarn(e){
                this.warn.label = e.value[0].label
                this.warn.value = e.value[0].value
                this.warn.show = false
                // 督办列表
                this.paging.pageNum = 1
                this.page.list = []
                this.getDubanList()
                this.toTop()
            },


            // 预警督办
            getDubanSupervise(){
                uni.showLoading({ title:'预警督办' })
                // console.log('预警督办-参数',this.prameter)
                this.$request(this, this.$apis.DubanSupervise,this.prameter).then(res => {
                    // console.log('预警督办',res)
                    this.duBans.map((v,i)=>{
                        v.value = res[v.filed]
                    })
                }).then()
            },

            // 督办列表
            getDubanList(){
                this.page.status = 'loading'
                const prameter = Object.assign(this.prameter,this.paging)
                prameter.type = this.warn.value
                // console.log('督办列表-参数',prameter)
                this.$request(this,this.$apis.DubanList,prameter).then(res=>{
                    // console.log('督办列表',res)
                    this.page.total = res.total
                    if( res.total && res.total != 0 ){
                        this.page.status = 'loadmore'
                        res.data.map((v,i)=>{
                            this.page.list.push(v)
                        })
                    }else{
                        this.page.status = 'nomore'
                        uni.$u.toast('暂无更多督办列表数据')
                    }
                }).then()
            },


            // 回到顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0, duration: 300 })
            }
		}
	}
</script>

<style scoped lang="scss">
    .content{
        .uniselect{
            width: 100%;
            position: fixed !important;
            left: 0;
        }
    }
</style>
